<template>
  <div class="app-container">

    <h2 style="text-align: center;">发布新课程</h2>


    <el-steps :active="1" process-status="wait" align-center style="margin-bottom: 40px;">

      <el-step title="填写课程基本信息"/>

      <el-step title="创建课程大纲"/>

      <el-step title="提交审核"/>

    </el-steps>


    <el-form label-width="120px">


      <el-form-item label="课程标题">

        <el-input v-model="courseInfo.title" placeholder=" 示例：机器学习项目课：从基础到搭建项目视频课程。专业名称注意大小写"/>

      </el-form-item>


      <!-- 所属分类：级联下拉列表 -->

      <!-- 一级分类 -->

      <el-form-item label="课程类别">

        <el-select @change="subjectLevelOneChanged"

                   v-model="courseInfo.subjectParentId"

                   placeholder="一级分类">

          <el-option

            v-for="subject in subjectNestedList"

            :key="subject.id"

            :label="subject.title"

            :value="subject.id"/>

        </el-select>


        <!-- 二级分类 -->

        <el-select v-model="courseInfo.subjectId" placeholder="二级分类">

          <el-option

            v-for="subject in subSubjectList"

            :key="subject.value"

            :label="subject.title"

            :value="subject.id"/>

        </el-select>

      </el-form-item>


      <el-form-item label="课程讲师">

        <el-select

          v-model="courseInfo.teacherId"

          placeholder="请选择">

          <el-option

            v-for="teacher in teacherList"

            :key="teacher.id"

            :label="teacher.name"

            :value="teacher.id"/>

        </el-select>

      </el-form-item>

      <el-form-item label="总课时">

        <el-input-number :min="0" v-model="courseInfo.lessonNum" controls-position="right" placeholder="请填写课程的总课时数"/>

      </el-form-item>


      <!-- 课程简介-->

      <el-form-item label="课程简介">

        <tinymce :height="300" v-model="courseInfo.description"/>

      </el-form-item>

      <el-form-item label="课程封面">


        <el-upload

          :show-file-list="false"

          :on-success="handleAvatarSuccess"

          :before-upload="beforeAvatarUpload"

          :action="BASE_API+'/eduoss/fileoss/upload'"

          class="avatar-uploader">

          <img :src="courseInfo.cover">

        </el-upload>


      </el-form-item>

      <el-form-item label="课程价格">

        <el-input-number :min="0" v-model="courseInfo.price" controls-position="right" placeholder="免费课程请设置为0元"/>
        元

      </el-form-item>

      <el-form-item>

        <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrupdate">保存并下一步</el-button>

      </el-form-item>

    </el-form>
  </div>
</template>

<script>


  import course from '@/api/course/course'

  import subject from '@/api/subject/subject'
  import Tinymce from '@/components/Tinymce'

  const defaultForm = {

    title: '',

    subjectId: '',

    teacherId: '',

    lessonNum: 0,

    description: '',

    cover: 'https://cytbucket.oss-cn-beijing.aliyuncs.com/2020/05/06/469c8462-8cbd-47b5-b450-2970273caa71.png',

    price: 0

  }

  export default {
    components: { Tinymce },
    data() {

      return {

        courseInfo: defaultForm,

        saveBtnDisabled: false,// 保存按钮是否禁用

        teacherList: [],

        subjectNestedList: [],//一级分类列表

        subSubjectList: [], //二级分类列表

        BASE_API: process.env.BASE_API // 接口API地址

      }

    },

    created() {
      console.log('info created')
      if (this.$route.params && this.$route.params.id) {
        console.log(this.$route.params.id)
        this.getCourseInfoById(this.$route.params.id)
      } else {
        this.courseInfo = {}
        this.courseInfo.cover = 'https://cytbucket.oss-cn-beijing.aliyuncs.com/2020/05/06/469c8462-8cbd-47b5-b450-2970273caa71.png'
        this.getAllTeacher()
        this.getOneSubject()
      }
      this.getAllTeacher()
      this.getOneSubject()
    },

    methods: {
      getCourseInfoById(id) {
        course.getCourseInfoById(id).then(response => {
          this.courseInfo = response.data.eduCourse
          subject.getNestedTreeList().then(response => {
            this.subjectNestedList = response.data.date
            for (let i = 0; i < this.subjectNestedList.length; i++) {
              if (this.subjectNestedList[i].id == this.courseInfo.subjectParentId) {
                this.subSubjectList = this.subjectNestedList[i].children
              }
            }
          })
        })
      },

      handleAvatarSuccess(res, file) {
        console.log(res)// 上传响应
        this.courseInfo.cover = res.data.url
      },

      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg'
        const isLt2M = file.size / 1024 / 1024 < 2
        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!')
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!')
        }
        return isJPG && isLt2M
      },

      subjectLevelOneChanged(value) {
        console.log(value)
        for (let i = 0; i < this.subjectNestedList.length; i++) {
          if (this.subjectNestedList[i].id === value) {
            this.subSubjectList = this.subjectNestedList[i].children
            this.courseInfo.subjectId = ''
          }
        }
      },
      getOneSubject() {
        subject.getNestedTreeList().then(response => {
          this.subjectNestedList = response.data.date
        })
      },

      getAllTeacher() {
        course.getList().then(response => {
          this.teacherList = response.data.items
        })
      },
      saveOrupdate() {
        // 新建
        if (this.courseInfo.id == null) {
          course.saveCourseInfo(this.courseInfo)
            .then(response => {
              this.$message({
                type: 'success',
                message: '保存成功!'
              })
              this.$router.push({ path: '/edu/course/chapter/' + response.data.courseId })
            })
        }
        // 更新
        else {
          course.updateCourseInfo(this.courseInfo)
            .then(response => {
              this.$message({
                type: 'success',
                message: '更新成功!'
              })
              this.$router.push({ path: '/edu/course/chapter/' + response.data.courseId })
            })
        }
      }
    }
  }
</script>


<style scoped>
  .tinymce-container {
    line-height: 29px;
  }
</style>
